@import "../../assets/styles/base.css";
@import "../../assets/styles/common.scss";
.testPage{
  ul{
    background-color: white;
    padding-left: .3rem;
    li{
      overflow: hidden;
      border-bottom: solid 1px #ebebeb;
      height: .8rem;
      h2{
        float: left;
        display: inline-block;
        line-height:.8rem;
        text-align: left;
        font-size: .26rem;
        font-weight: normal;
        color: black;
      }
      .right-icon{
        width: .14rem;
        height: .8rem;
        line-height: .8rem;
        margin-right: .3rem;
        display: inline-block;
        float: right;
        font-size: $fs20;
        color: #ccc;
      }
    }
  }
  .page-item{
    .page-item-title{
      padding: .3rem 0 .36rem .2rem;
      height:.32rem;
      line-height: .32rem;
      position: relative;
      text-indent: .3rem;
      font-weight: bold;
      .left-span{
        display: inline-block;
        height: .32rem;
        width: .08rem;
        background-color: black;
        position: absolute;
        top: .3rem;
        left: .2rem;
      }

    }
    .title-container{
      padding: .35rem .3rem 0 .3rem;
      position: relative;
      .title{
        text-align: center;
        padding-bottom: .3rem;
        font-weight: bold;
        border-bottom: 1px solid #EBEBEB;
      }
      .san-jiao{
        position: absolute;
        top: .1rem;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -.21rem;
        border-left: .21rem solid transparent;
        border-right: .21rem solid transparent;
        border-top: .21rem  solid #ddd;
      }
    }
    .desc {
      padding: .2rem .3rem 0 .3rem;
      color:#666666;
      line-height: .44rem;
      p{
        border-bottom: 1px solid #EBEBEB;
        padding-bottom: .2rem;
      }
    }
    .tip-tabs{
      display: flex;
      padding:.4rem .3rem;
      .item{
        flex: 1;
        text-align: center;
        display: flex;
        justify-content:center;
        .item-con{
          text-align: center;
          &.time1{
            padding-left: .6rem;
            //background: url(/src/assets/image/quick-hand/icon-big1.png) left center no-repeat;
            background-size: .6rem .5rem;
          }
          &.time2{
            padding-left: .58rem;
            //background: url(/src/assets/image/quick-hand/icon-big2.png) left center no-repeat;
            background-size: .58rem .54rem;
          }
          .item-wrap{
            padding-left: .2rem
          }
        }
      }
    }
    .step-img-wrap{
      padding: 0 .2rem .3rem .2rem
    }
    .line{
      width: 100%;
      height: .29rem;
      background: url(/client/assets/img/quick-hand/bg1.jpg) 0 0 repeat-x;
      background-size: .44rem .29rem;
    }
  }
  .test1{
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .test2{
    width: 100px;
    height: 100px;
    background-color: #333;
    margin-top: 20px;
  }
  .test1:hover{
    width: 800px;
    background-color: green;
  }
  .transtion1{
    transition: width 1s, background-color 2s;
  }

  .animation-test{
    animation: 1s animation1 infinite;
  }

  @keyframes animation1{
    0%{
      width: 100px;
    }
    50%{
      width: 400px;
    }
    100%{
      width: 800px;
    }
  }

  .container{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background: url(./img/animal.png) no-repeat;
    animation: run 1s infinite;
    animation-timing-function: steps(1);
  }
  @keyframes run{
    0%{
      background-position: 0 0;
    }
    12.5%{
      background-position: -100px 0;
    }
    25%{
      background-position: -200px 0;
    }
    37.5%{
      background-position: -300px 0;
    }
    50%{
      background-position: 0 -100px;
    }
    62.5%{
      background-position: -100px -100px;
    }
    75%{
      background-position: -200px -100px;
    }
    87.5%{
      background-position: -300px -100px;
    }
    100%{
      background-position: 0 0;
    }
  }


  .list-group{
    padding-bottom: 30px;
    height: auto;
    .list-group-title{
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: 12px;
      color: blue;
      background: #ccc;
    }
    .list-group-item{
      color: red;
      line-height: 30px;
    }
  }

  .leftList{
    position: absolute;
    right: 0;
    width: 30px;
    top: 50%;
    transform: translateY(-50%);
  }



  .container2{
    margin:0 auto;
    //max-width:800px;
    width: 100%;
    border:1px solid black;
    font-size: 32px;
  }
  .intro{
    display: inline-block;
    width:1.2rem;
    height:1.2rem;
    line-height: 1.2rem;
    text-align: center;
    border-radius: 50%;
    border:1px solid red;
    //margin:.1rem;
    margin: 8px;
    box-sizing: border-box;
   font-size: .24rem;
  }
  @media (max-width: 640px){
    .intro{
      /*margin:.3rem auto;*/
      //margin:6px auto;
      //display: block;
    }
  }
  @media (max-width: 375px){
    /*html{*/
    /*font-size:24px;*/
    /*}*/
  }
  @media (max-width: 320px){
    /*html{*/
    /*font-size:20px;*/
    /*}*/
  }


}

.item{
  display: flex;
  box-sizing: border-box;
  align-items: center; //水平方向居中
  padding: 0 20px 20px 20px;
  .icon{
    flex: 0 0 60px;
    width: 60px;
    padding-right: 20px;
  }
  .text{
    display: flex;
    flex-direction: column ; //纵向排列
    justify-content: center;  //垂直居中
    flex: 1;
    line-height: 20px;
    overflow: hidden;
  }
  .name{
    margin-bottom: 10px;
  }
}



